<template>
	<view class="pages">
		<view class="top">
			<view class="text">
				倒计时：
			</view>
			<view class="progress">
				<view class="nei"></view>
			</view>
		</view>
		<view class="boll" @click="handleBoll">
			<image src="../../static/ihgPic/blue.png" mode="" class="img1"></image>
			<image src="../../static/ihgPic/red.png" mode="" class="img2"></image>
			<image src="../../static/ihgPic/pink2.png" mode="" class="img3"></image>
			<image src="../../static/ihgPic/green.png" mode="" class="img4"></image>
		</view>
	</view>
</template>

<script setup>
	const handleBoll = () => {
		uni.navigateTo({
			url:'/pages/two-balloon01/two-balloon01'
		})
	}
</script>

<style>
	.pages{
		display: flex;
		flex-direction: column;
		align-items: center;
		flex-wrap: nowrap;
		/* justify-content: center; */
		background-image: url(../../static/ihgPic/bk5.png);
		width: 100%;
		height: 100vh;
		background-size: cover;
	}
	.top{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 120rpx;
	}
	.text{
		font-size: 40rpx;
		color: #fff;
	}
	.progress{
		width: 500rpx;
		/* background-color: #fff; */
		border: 5px solid #fff;
		margin-top: 5px;
		border-radius: 20px;
		padding: 5rpx 5rpx;
	}
	.nei{
		width: 100rpx;
		height: 6px;
		background-color: #fff;
		border-radius: 5px;
	}
	.boll{
		width: 100%;
		flex-grow: 1;
		display: flex;
		flex-wrap: nowrap;
		margin-left: 60px;
		margin-top: 105px;
		position: relative;
	}
	.img1{
		width: 145rpx;
		height: 545rpx;
		position: absolute;
		margin-left: 51px;
		margin-top: 52px;
		z-index: 99;
	}
	.img2{
		width: 145rpx;
		height: 545rpx;
		position: absolute;
		margin-left: 90px;
	}
	.img3{
		width: 145rpx;
		height: 545rpx;
		position: absolute;
		margin-left: 162px;
		margin-top: 30px;
		z-index: 99;
}
	.img4{
		width: 145rpx;
		height: 545rpx;
		position: absolute;
		margin-left: 120px;
		margin-top: 90px;
	}
	
</style>
